/* 
Document   : ms
Created on : Feb 24, 2012, 3:15:39 PM
Author     : sunchak
Description:
Purpose of the stylesheet follows.
*/

/* 
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
body{
    font-family:Verdana;
}
.ms_container {
    width:1024px;
    margin:0 auto;
}
.top_header{
    height:50px;
    width:100%;
    background-color:#333333;
    display:inline-block;
    color:white;
}
.footer{
    height:200px;
    width:100%;
    background-color:#333333;
    display:inline-block;
    color:white;
    margin-top: 10px;
    float: left;
}
.footer #content{
    width:1024px;
    margin-left: auto;
    margin-right: auto;
    
    border-style:solid;
    border-color:#8ab8fc;
    border-width:2px;
}
.footer #content #left, #right, #middle{
    width:340px;
}
#logo{
    width:250px;
    margin-left:2px;
    margin-top: 1px;
    display:inline-block;
    vertical-align: top;
}
#links{
    width:700px;
    padding-top:15px;
    text-align:right;
    display:inline-block;
    font-weight:bold;
    vertical-align: top;
}
.long-text-bar{
    width:400px;
}
.long-button{
    width:100px;
}
.searchbar{
    margin-top:0px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    background-color: #adadad;


    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top:3px;
    margin-bottom:3px;
}
.center-div{
    width:1024px;
    display:inline-block;
    vertical-align:top;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#category-menu-holder{
    height:400px;
    width:700px;
    vertical-align:top;
    display:inline-block;

    border-style:solid;
    border-color:#8ab8fc;
    border-width:2px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
}
#category-menu-holder .header{
    background-image: linear-gradient(bottom, rgb(252,252,252) 6%, rgb(182,210,252) 63%, rgb(138,184,252) 91%);
    background-image: -o-linear-gradient(bottom, rgb(252,252,252) 6%, rgb(182,210,252) 63%, rgb(138,184,252) 91%);
    background-image: -moz-linear-gradient(bottom, rgb(252,252,252) 6%, rgb(182,210,252) 63%, rgb(138,184,252) 91%);
    background-image: -webkit-linear-gradient(bottom, rgb(252,252,252) 6%, rgb(182,210,252) 63%, rgb(138,184,252) 91%);
    background-image: -ms-linear-gradient(bottom, rgb(252,252,252) 6%, rgb(182,210,252) 63%, rgb(138,184,252) 91%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.06, rgb(252,252,252)),
        color-stop(0.63, rgb(182,210,252)),
        color-stop(0.91, rgb(138,184,252))
        );
    height:35px;
}
#category-menu-holder .content{
    background-color:#fcfcfc;
}
#adv-holder{
    width:230px;
    display:inline-block;
    vertical-align:top;
}
#search-criteria-holder{
    width: 300px;
    border-style: solid;
    border-width: 2px;
    border-color: #03520c;
    display: inline-block;    
    height: 200px;
    float: left;
    text-align: left;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    margin-right: 15px;
}
#search-criteria-holder .content{
    width:300px;
    float: left;
    text-align: left;
    margin-left: -20px;
}
#search-criteria-holder .header{
    background-image: linear-gradient(bottom, rgb(194,252,161) 0%, rgb(28,99,10) 77%, rgb(3,82,12) 99%);
    background-image: -o-linear-gradient(bottom, rgb(194,252,161) 0%, rgb(28,99,10) 77%, rgb(3,82,12) 99%);
    background-image: -moz-linear-gradient(bottom, rgb(194,252,161) 0%, rgb(28,99,10) 77%, rgb(3,82,12) 99%);
    background-image: -webkit-linear-gradient(bottom, rgb(194,252,161) 0%, rgb(28,99,10) 77%, rgb(3,82,12) 99%);
    background-image: -ms-linear-gradient(bottom, rgb(194,252,161) 0%, rgb(28,99,10) 77%, rgb(3,82,12) 99%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(194,252,161)),
        color-stop(0.77, rgb(28,99,10)),
        color-stop(0.99, rgb(3,82,12))
        );
    height: 30px;
    color:white;
    font-weight: bold;        
    vertical-align: top;
    margin-top: 0px;
    border-top-left-radius:  2px;
    border-top-right-radius:  2px;
}
#search-criteria-holder .content div{
    display: inline-block;
    float: left;
    text-align: left;
}
#row div{
    width:90px;
}
#row select{
    width:150px;
}
.category-header{
    width:210px;
    height:20px;

    color:#FF6633;
    font-family:verdana;
    font-weight:bold;
    border-bottom-style: solid;
    border-bottom-color: silver;
    border-bottom-width: 0px;
    vertical-align: bottom;
}
.category-header img{
    border-style: solid;
    border-width: 0px;
    border-color: silver;
}
.category-item{
    width:210px;
    margin-top:3px;
    margin-bottom:3px;
    border-style:solid;
    border-color:silver;
    border-width:0px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.category-item a{
    color:#006600;
}

#banner-advertisement{
    height:110px;
    text-align:center;
    width:1022px;
    border-style:solid;
    border-color:silver;
    border-width:0px;
    background-image: url('http://www.fileden.com/files/2011/11/1/3218242/advertise.png');
    background-repeat:no-repeat;
}
#banner-advertisement .wrapper{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color:gray;
    border-style:solid;
    border-color:silver;
    border-width:1px;

    background-image: linear-gradient(bottom, rgb(105,105,105) 5%, rgb(230,230,230) 49%, rgb(110,110,110) 94%);
    background-image: -o-linear-gradient(bottom, rgb(105,105,105) 5%, rgb(230,230,230) 49%, rgb(110,110,110) 94%);
    background-image: -moz-linear-gradient(bottom, rgb(105,105,105) 5%, rgb(230,230,230) 49%, rgb(110,110,110) 94%);
    background-image: -webkit-linear-gradient(bottom, rgb(105,105,105) 5%, rgb(230,230,230) 49%, rgb(110,110,110) 94%);
    background-image: -ms-linear-gradient(bottom, rgb(105,105,105) 5%, rgb(230,230,230) 49%, rgb(110,110,110) 94%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.05, rgb(105,105,105)),
        color-stop(0.49, rgb(230,230,230)),
        color-stop(0.94, rgb(110,110,110))
        );



}

#banner-advertisement .content{
    width:900px;
    height:100px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-style:solid;
    border-color:silver;
    border-width:1px;
    vertical-align:middle;
    margin-top:3px;
    margin-left:20px;
    background-color:white;

    background-image: linear-gradient(right , rgb(230,230,230) 5%, rgb(173,173,173) 49%, rgb(235,232,235) 94%);
    background-image: -o-linear-gradient(right , rgb(230,230,230) 5%, rgb(173,173,173) 49%, rgb(235,232,235) 94%);
    background-image: -moz-linear-gradient(right , rgb(230,230,230) 5%, rgb(173,173,173) 49%, rgb(235,232,235) 94%);
    background-image: -webkit-linear-gradient(right , rgb(230,230,230) 5%, rgb(173,173,173) 49%, rgb(235,232,235) 94%);
    background-image: -ms-linear-gradient(right , rgb(230,230,230) 5%, rgb(173,173,173) 49%, rgb(235,232,235) 94%);

    background-image: -webkit-gradient(
        linear,
        right top,
        left top,
        color-stop(0.05, rgb(230,230,230)),
        color-stop(0.49, rgb(173,173,173)),
        color-stop(0.94, rgb(235,232,235))
        );

}
#category-row div{
    display:inline-block;
    vertical-align: top;
}
#category-row{
    display:inline-block;
    height:100px;
    width:650px;
    vertical-align: top;
}
#loginScreen{
    width:200px;
    height:100px;
    display:none;
    border-style:solid;
    border-color:#8ab8fc;
    border-width:1px;
    z-index:5;
    position:relative;
    background-color:#8ab8fc;
    padding-top:10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#loginScreen input{
    width:100px;
    height:20px;
}

#itemDiv{
    width:400px;
    height:100px;
}
#itemDiv .header{
    height: 20px;
    font-weight: bold;
}
#itemDiv .header .name{
    float: left
}

#itemDiv .header .rating{
    float: right
}
